<!--
 * @Author: ChunLai
 * @Date: 2022-03-28 17:35:09
 * @LastEditTime: 2024-01-04 17:11:41
 * @Description: 
 * @FilePath: \01.latest-short-insure\src\components\MyLoading.vue
-->
<template>
  <div class="my-loading" v-if="show">
    <van-overlay
      class="overlay-wrap"
      z-index="99999"
      :show="show"
      :custom-style="{ background: 'rgba(0, 0, 0, 0.5)' }"
    >
      <div class="loading-icon">
        <img
          class="load_ico"
          src="https://mschn-pro.oss-cn-beijing.aliyuncs.com/image/appicon/loging.gif"
          alt=""
        />
        <div class="loading_text" v-if="loadTexts.length > 0">
          <span
            class="jump_txt"
            :style="`--i:${index + 1}`"
            v-for="(item, index) in loadTexts"
            :key="`load${index}text`"
          >
            {{ item }}
          </span>
          <span>...</span>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: "MyLoading",
  props: {
    show: {
      type: Boolean,
      default: (_) => false,
    },
    text: {
      type: String,
      default: "",
    },
  },
  computed: {
    loadTexts() {
      let res = [];
      if (this.text) {
        res = this.text.split("");
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.overlay-wrap .loading-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: inherit;
  margin-top: -50px;
}

.loading-icon .load_ico {
  width: 120px;
  height: 120px;
}
.loading_text {
  position: relative;
  color: #fff;
  font-size: 14px;

  .jump_txt {
    display: inline-block;
    letter-spacing: 1px;
    // animation: loading 2s ease-in-out infinite;
    // animation-delay: calc(0.2s * var(--i));
  }
}
/deep/.van-overlay {
  z-index: 99999 !important;
}
</style>
